<template>
  <view v-if="loading"  class="container" style="width: 100%;height: 100vh;">
    <view class="top" style="margin-top: 2rem;z-index: 999">
      <view class="top-left">
        <image class="top-left-image" @click="exit(current)"
               src="http://www.douluodalu.icu:9000/school/static/left-white.png"></image>
      </view>
    </view>


    <swiper ref="swiper" :current="current"
            @change="change"
            style="width: 100%;height: 100vh;"
            class="swiper"
            :circular="false"
            :duration="200">
      <swiper-item v-for="(item,index) in fileList"
                   style="width: 100%;height: 100vh;display: flex;
                           align-items: center;justify-content: center"
                   :key="index">
        <image v-if="isImageUrl(item)"
               style="width: 100%;height: 100vh;position: relative"
               mode="widthFix"
               @click="play(index)"
               :src="item">
        </image>
        <video
            :id="'video-' + index"
            @click="play(index)"
            preload loop webkit-playsinline
            x5-playsinline-type
            @fullscreenchange="fullscreenchange"
            @longpress="speed()"
            @touchstart="touchStart"
            @touchend="touchend"
            :enable-progress-gesture="false"
            :vslide-gesture-in-fullscreen="false"
            :show-fullscreen-btn="false"
            :show-center-play-btn="false"
            :show-play-btn="false"
            v-if="isVideoUrl(item)"
            object-fit="contain"
            :src="item">
        </video>

      </swiper-item>
    </swiper>

  </view>
  <u-loading-page v-else color="white" loading loading-text="加载中..." bg-color="black" loading-color="white" ></u-loading-page>
</template>

<script>
import Login from "@/pages/my/login.vue";

export default {
  // props: ['fileList','currentIndex'],
  data() {
    return {
      loading:false,
      playing: false,
      isImage:false,
      isVideo:false,
      fileList: [],
      current: 0,
      videoContext: null,
      curr: false,
      pageStartX: 0,
      swiper: null,
      pageEndX: 0,
    };
  },
  mounted() {
    uni.hideShareMenu()
    uni.$on('sendFileList', (params) => {
      if (params != null) {
        this.fileList = params.fileList;
        this.current = params.currentIndex;
      }
      this.loading = true
      setTimeout(() => {
        if (this.isVideoUrl(this.fileList[params.currentIndex])) {
          uni.createVideoContext(`video-${params.currentIndex}`, this).play();
        }
      }, 550)
    })

  },
  methods: {
    change(e) {
      let index = e.detail.current;
      let lastVideoContext = uni.createVideoContext(`video-${this.current}`, this);
      let currentVideoContext = uni.createVideoContext(`video-${index}`, this);
      if (this.isVideoUrl(this.fileList[this.current])) {
        this.playing = true;
        lastVideoContext.pause();
      }
      if (this.isVideoUrl(this.fileList[index])) {
        this.playing = false;
        currentVideoContext.play();
        this.isVideo = true
      }else {
        this.isVideo = false
      }
      this.current = index
    },
    fullscreenchange() {
      this.videoContext.play();
    },
    // 播放时进入全屏
    play(index) {
      if (this.isVideoUrl(this.fileList[index])) {
        if (this.playing === false) {
          this.videoContext = uni.createVideoContext(`video-${index}`, this)
          // this.videoContext.requestFullScreen({
          //   direction:'vertical'
          // })
          this.videoContext.pause();
          this.playing = true;
          return
        }
        this.videoContext = uni.createVideoContext(`video-${index}`, this)
        this.videoContext.play();
        this.playing = false;
      }
      // this.current = index
    },

    exit(index) {
      if (this.isVideoUrl(this.fileList[index])) {
        uni.createVideoContext(`video-${index}`, this).pause()
      }
      uni.navigateBack({
        delta: 1
      })
    },
    isImageUrl(url) {
      if (url != null) {
        const dotIndex = url.lastIndexOf(".");
        // 截取路径的扩展名
        const extension = url.substring(dotIndex);
        // 判断扩展名是否是图片扩展名
        const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tif', '.tiff'];
        // console.log(url+'----后缀：'+ extension +'----->  '+imageExtensions.includes(extension))
        return imageExtensions.includes(extension) && url.startsWith("http");
      }

    },
    isVideoUrl(url) {
      if (url != null) {
        const dotIndex = url.lastIndexOf(".");
        // 截取路径的扩展名
        const extension = url.substring(dotIndex);
        // 判断扩展名是否是图片扩展名
        let videoExtensions = [".3gp", ".avi", ".flv", ".mkv", ".mov", ".mpg", ".mp4", ".rmvb", ".wmv"];
        // console.log(url+'----后缀：'+ extension +'----->  '+imageExtensions.includes(extension))
        return videoExtensions.includes(extension) && url.startsWith("http");
      }

    },
    touchStart(res) {
      this.pageStartX = res.changedTouches[0].pageX;
    },
    speed() {
      this.videoContext.playbackRate(2)
    },
    touchend(res) {
      this.videoContext.playbackRate(1)
    }
  },
}
</script>

<style lang="scss">
//page {
//  width: 100%;
//  height: 100vh;
//}
.container {
  width: 100%;
  height: calc(100vh - 120upx - env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  padding: 0 !important;
  margin: 0 !important;
}

video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top {
  padding: 20px 10px 0px 10px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  font-size: 14px
}

.top-left {
  display: flex;
  align-items: center;
}

.top-left-image {
  width: 20px;
  height: 20px;
}

.top-left-text {
  margin-left: 10px;
  font-size: 12px;
}

.top-right {
  width: 20px;
}


.bottom {
  z-index: 99;
  padding: 0 10px;
  position: absolute;
  bottom: 3.5rem;
  left: 0;
}

.danmu-wrapper {
  display: flex;
  align-items: center;
  color: #fff;
}

.danmu {
  color: #fff;
  padding: 5px;
  width: 20px;
  height: 15px;
  background-color: rgba(80, 79, 79, 0.63);
  border-radius: 25rpx;
  border: 2px solid #fff;
  font-weight: bolder;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.danmu-on {
  position: absolute;
  right: 3px;
  bottom: 0;
  color: #4ea4f9;
  font-size: 14px;
  font-weight: bolder;
  padding: 1px;
}

.bottom-input {
  padding: 5px;
  border-radius: 75rpx;
  background-color: rgba(80, 79, 79, 0.96);
}

.shu {
  width: 1px;
  margin: 0 5px;
  height: 15px;
  background-color: #fff;

}

</style>



